import { ProCard } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, Cascader, Col, DatePicker, Row, Skeleton } from 'antd';
import moment from 'moment';
import { useState } from 'react';
import { useAccess } from 'umi';
import TrendCuesColumnCard from './components/TrendCuesColumnCard';
import TrendCuesRankCard from './components/TrendCuesRankCard';


//排行榜筛选项
const organizationTopIdOptions = [
    {
        value: '',
        label: '全部',
    },
    {
        value: '6000000000001000',
        label: '市委宣传部',
    },
    {
        value: '6000000000002000',
        label: '中央媒体',
    },
    {
        value: '6000000000003000',
        label: '市属媒体',
    },
    {
        value: '6000000000004000',
        label: '市外媒体',
    },

    {
        value: '6000000000005000',
        label: '市级部门',
    },
    {
        value: '6000000000006000',
        label: '区县委宣传部',
    },
    //没有排行
    {
        value: '6000000000007000',
        label: '区县融媒体中心',
    },
    {
        value: '6000000000009000',
        label: '其他',
    },
]


interface TrendCardProps { }

const TrendCard: React.FC<TrendCardProps> = ({ }) => {
    const access = useAccess();
    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState || {};
    const monthFormat = 'YYYY-MM-DD';
    const startDate = moment().startOf('month');
    const endOfDate = moment();


    //线索报送量、线索收录量
    const [dataTabType, setDataTabState] = useState<string>('1');

    //选择组织类型
    const [dataOrganizationTopName, setDataOrganizationTopNameState] = useState<string>(organizationTopIdOptions[0].label);
    const [dataOrganizationTopId, setDataOrganizationTopIdState] = useState<string>(organizationTopIdOptions[0].value);

    //日期范围
    const [dataDates, setDataDatesState] = useState<string[]>([startDate.format(monthFormat), endOfDate.format(monthFormat)])

    return (
        <>
            {window.innerWidth < 400 ? <></> : <Skeleton avatar title={false} loading={false} active>
                <Card
                    style={{ width: '100%', marginTop: '24px', }}
                    title={false}
                    tabList={[
                        {
                            tab: `选题计划`,
                            key: '1',
                        },
                        // {
                        //     tab: `报送选题`,
                        //     key: '2',
                        // },
                        // {
                        //     tab: `主动报送`,
                        //     key: '3',
                        // },
                    ]}
                    onTabChange={(key) => {
                        setDataTabState(key);
                    }}
                    tabBarExtraContent={<>
                        {/* <span style={{ marginRight: 20 }}>
                            &nbsp;
                            {access.线索征集x配置x管理员 ? <Cascader defaultValue={[dataOrganizationTopId]} options={organizationTopIdOptions} onChange={(value: any[], selectOptions: any) => {
                                setDataOrganizationTopIdState(value[value.length - 1]);
                                setDataOrganizationTopNameState(selectOptions.map((item: { label: any; }) => item.label).join(' > '))
                            }}
                            ><a>{dataOrganizationTopName}</a>
                            </Cascader> : <></>}
                        </span> */}
                        <DatePicker.RangePicker
                            popupStyle={{ width: 400 }}
                            style={{ width: 230 }}
                            allowClear={false}
                            defaultValue={[startDate, endOfDate]}
                            format={monthFormat}
                            disabledDate={(current) => {
                                return current && current > moment().endOf('day')
                            }}
                            onChange={(values, dates) => {
                                setDataDatesState(dates)
                            }}
                            ranges={{
                                今日: [moment(), moment()],
                                本月: [moment().startOf('month'), moment().endOf('month')],
                                上月: [
                                    moment().startOf('month').subtract(1, 'months'),
                                    moment().endOf('month').subtract(1, 'months'),
                                ],
                                最近7天: [moment().subtract(6, 'days'), moment()],
                                最近60天: [moment().subtract(59, 'days'), moment()],
                                最近90天: [moment().subtract(89, 'days'), moment()],
                            }}
                        />
                    </>}
                    bodyStyle={{
                        paddingTop: 0
                    }}
                >
                    <Row style={{
                        marginTop: 5
                    }}>
                        {/* {(currentUser?.organizationTopId === "6000000001400000" || currentUser?.organizationTopId === "6000000001700000" || currentUser?.organizationTopId === "6000000001600000" || currentUser?.organizationTopId === "6000000002100000" || currentUser?.organizationTopId === "6000000003000000") ?
                            <Col xl={24} lg={24} md={24} sm={24} xs={24}>
                                <ProCard>
                                    <TrendCuesColumnCard type={dataTabType} organizationTopId={dataOrganizationTopId} />
                                </ProCard>
                            </Col> :  */}
                            <Col xl={15} lg={12} md={12} sm={24} xs={24}>
                                <ProCard>
                                    <TrendCuesColumnCard type={dataTabType} organizationTopId={dataOrganizationTopId} />
                                </ProCard>
                            </Col>
                            {/* } */}
                        {/* {(currentUser?.organizationTopId === "6000000001400000" || currentUser?.organizationTopId === "6000000001700000" || currentUser?.organizationTopId === "6000000001600000" || currentUser?.organizationTopId === "6000000002100000" || currentUser?.organizationTopId === "6000000003000000") ? <></> : */}
                            <Col xl={9} lg={12} md={12} sm={24} xs={24}>
                                <ProCard>
                                    <TrendCuesRankCard type={dataTabType} organizationTopId={dataOrganizationTopId} dates={dataDates} />
                                </ProCard>
                            </Col>
                        {/* } */}

                    </Row>
                </Card>
            </Skeleton>}

        </>
    )
};

export default TrendCard;
